let colors = ['#0df1de', '#2fe6fc', '#6291f2', '#2861d6', '#0a29be', '#400dc0', '#791c97', '#d0630a', '#f2ec3b', '#25c379']

//评价占比
function buildChart1() {
  var chart = echarts.init(document.getElementById('evaluate'));

  option = {
    color: colors,
    tooltip: {
      trigger: 'item',
      color: "#fff",
      formatter: "{a} <br/>{b}:{c}({d}%)"
    },
    series: [{
      name: '评价占比',
      type: 'pie',
      selectedMode: 'single',
      label: {
        normal: {
          position: 'inner',
          formatter: "{b}:{d}%"
        }
      },
      data: [{
        value: 653,
        name: '好评'
      }, {
        value: 220,
        name: '中评'
      }, {
        value: 131,
        name: '差评'
      }]
    }]
  };

  chart.setOption(option);

  window.onresize = chart.resize;
}

//热门关键字
function buildChart2() {
  var chart = echarts.init(document.getElementById('key'));

  var option = {
    tooltip: {},
    color: colors,
    series: [{
      type: 'wordCloud',
      gridSize: 2,
      sizeRange: [12, 50],
      rotationRange: [-90, 90],
      shape: 'pentagon',
      width: 600,
      height: 400,
      drawOutOfBound: true,
      textStyle: {
        normal: {
          color: function () {
            return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') + ')';
          }
        },
        emphasis: {
          shadowBlur: 10,
          shadowColor: '#333'
        }
      },
      data: [
        {
          name: '云台山',
          value: 10000,
          textStyle: {
            normal: {
              color: '#F29961'
            },
            emphasis: {
              color: 'red'
            }
          }
        },
        {
          name: '夏季避暑胜地在云台',
          value: 6181
        },
        {
          name: '云台上景区音乐会',
          value: 4386
        },
        {
          name: '十一黄金周大堵车',
          value: 4055
        },
        {
          name: '环境整改何时能够落实',
          value: 2467
        },
        {
          name: '十一黄金周哪里玩',
          value: 2244
        },
        {
          name: '十一旅游需要防范什么',
          value: 1898
        },
        {
          name: '猪肉涨价',
          value: 1484
        },
        {
          name: '连锁反应',
          value: 1112
        },
        {
          name: '大阅兵',
          value: 965
        },
        {
          name: '高价打造A级景区',
          value: 847
        },
        {
          name: '景点',
          value: 582
        },
        {
          name: '不堪设想',
          value: 555
        },
        {
          name: '不堪设想',
          value: 550
        },
        {
          name: '交通运输',
          value: 462
        },
        {
          name: '交通堵塞',
          value: 366
        },
        {
          name: '宅',
          value: 360
        },
        {
          name: '大山',
          value: 282
        },
        {
          name: '青山绿水',
          value: 273
        },
        {
          name: 'BLACKPINK',
          value: 265
        }
      ]
    }]
  };

  chart.setOption(option);

  window.onresize = chart.resize;
}

buildChart1()
buildChart2()

// 销量分析
let salesDate = ['2015', '2016', '2017', '2018', '2019']
let passengerFlow = [1780, 1690, 1810, 1890, 1900,]
let salesGrowthRate = [14.0, 12.0, 15.6, 14.9, 12.1]

function buildChart7() {
  var myChart = echarts.init(document.getElementById('salesVolume'));

  option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '20%',
      left: '0',
      right: '0',
      bottom: '8%',
      containLabel: true,
    },
    legend: {
      itemGap: 50,
      data: ['客流量', '环比增长率'],
      itemWidth:20,
      itemHeight:10,
      right: "10%",
      textStyle: {
        color: '#fff',
      },
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#999'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: salesDate,
    }],
    yAxis: [
      {
        nameTextStyle: {
          color: "#ccc"
        },
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
          formatter: '{value} %',
          textStyle: {
            color: '#fff',
            fontSize: 12, //坐标值得具体的颜色
          }
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '客流量',
        type: 'bar',
        barMaxWidth: 16,
        label: {
          show: false,
          position: 'top',
          textStyle: {
            color: '#fff',
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(98,145,242)'
            },
              {
                offset: 1,
                color: 'rgb(10,41,190)'
              }
            ], false),
            // color: function(params) {
            //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
            //     return colorList[params.dataIndex];
            // }
          }
        },
        data: passengerFlow
      },
      {
        name: '环比增长率',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        symbol: 'none',
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(208,99,10,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(208,99,10,0)'
            }, {
              offset: 1,
              color: 'rgba(208,99,10,0)'
            }], false),
          },
        },
        itemStyle: {
          color: "rgba(208,99,10,0.6)"
        },

        data: salesGrowthRate
      }
    ]
  };


  myChart.setOption(option);
}

buildChart7()
$(".radio-box #provincialSales").click(function (e) {
  passengerFlow = [1780, 1690, 1810, 1890, 1900,]
  salesGrowthRate = [14.0, 12.0, 15.6, 14.9, 12.1]
  buildChart7()
});
$(".radio-box #outboundSales").click(function (e) {
  passengerFlow = [11690, 11810, 12780, 11900, 12920,]
  salesGrowthRate = [13.2, 13.0, 14.0, 10.4, 11.1]
  buildChart7()
});
$(".radio-box #inboundSales").click(function (e) {
  passengerFlow = [21690, 19851, 20780, 21190, 20920,]
  salesGrowthRate = [13.0, 14.0, 10.4, 13.2, 11.1]
  buildChart7()
});

// 收入分析
let incomeAmount = [5480, 5690, 8810, 8890, 8900,]
let incomeGrowthRate = [11.0, 12.0, 11.6, 11.9, 12.1]

function buildChart8() {
  var myChart = echarts.init(document.getElementById('income'));

  option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '20%',
      left: '0',
      right: '0',
      bottom: '8%',
      containLabel: true,
    },
    legend: {
      itemGap: 50,
      data: ['客流量', '环比增长率'],
      right: "10%",
      textStyle: {
        color: '#fff',
      },
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#999'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: salesDate,
    }],
    yAxis: [
      {
        nameTextStyle: {
          color: "#ccc"
        },
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
          formatter: '{value} %',
          textStyle: {
            color: '#fff',
            fontSize: 12, //坐标值得具体的颜色
          }
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '客流量',
        type: 'bar',
        barMaxWidth: 12,
        label: {
          show: false,
          position: 'top',
          textStyle: {
            color: '#fff',
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(98,145,242)'
            },
              {
                offset: 1,
                color: 'rgb(10,41,190)'
              }
            ], false),
            // color: function(params) {
            //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
            //     return colorList[params.dataIndex];
            // }
          }
        },
        data: incomeAmount
      },
      {
        name: '环比增长率',
        type: 'line',
        yAxisIndex: 1,
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
              offset: 0,
              color: 'rgba(13,241,222,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(13,241,222,0)'
            }, {
              offset: 1,
              color: 'rgba(13,241,222,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "#407FFF"
        },
        data: incomeGrowthRate
      }
    ]
  };


  myChart.setOption(option);
}

buildChart8()
$(".radio-box #provincialIncome").click(function (e) {
  incomeAmount = [1780, 1690, 1810, 1890, 1900,]
  incomeGrowthRate = [14.0, 12.0, 15.6, 14.9, 12.1]
  buildChart8()
});
$(".radio-box #outboundIncome").click(function (e) {
  incomeAmount = [1690, 1810, 1270, 1900, 1920,]
  incomeGrowthRate = [13.2, 13.0, 14.0, 10.4, 11.1]
  buildChart8()
});
$(".radio-box #inboundIncome").click(function (e) {
  incomeAmount = [1690, 1851, 2780, 2190, 2020,]
  incomeGrowthRate = [13.0, 14.0, 10.4, 13.2, 11.1]
  buildChart8()
});

//河南省旅游收入占比
function buildChart9() {
  var myChart = echarts.init(document.getElementById('HenanProvince'));
  option = {
    color: colors,
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      orient: 'vertical',
      right: '10%',
      y: 'center',
      textStyle: {
        color: "white"
      },
      itemHeight: 10,
      itemWidth: 20,
      data: ['飞猪', '携程', '美团', '官网']
    },
    series: [
      {
        name: '河南省旅游收入占比',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          {value: 335, name: '飞猪'},
          {value: 310, name: '携程'},
          {value: 234, name: '美团'},
          {value: 135, name: '官网'},
        ]
      }
    ]
  };

  myChart.setOption(option);
}

buildChart9()
